<template>
  <div>当前计数器为:{{ counter }}</div>
  <!-- 根据子组件的自定义事件进行触发 -->
  <add-compoent @add="add"></add-compoent>
  <sub-component @sub="sub"></sub-component>
</template>
<script>
import AddCompoent from "./Add.vue";
import SubComponent from "./Sub.vue";
export default {
  data() {
    return {
      counter: 0,
    };
  },
  components: {
    AddCompoent,
    SubComponent,
  },
methods: {
     //触发事件执行函数    
     add(count)
     {
         this.counter += count;
     },
     sub(count)
     {
         this.counter -= count;
     }   
  },
};
</script>
<style scoped>
</style>